<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{filename}}</title>
  <style>
    /* Base styles */
    :root {
      --bg-color: #121212;
      --card-bg: rgba(255, 255, 255, 0.08);
      --text-color: rgba(255, 255, 255, 0.9);
      --accent-color: #3a86ff;
      --shadow-color: rgba(0, 0, 0, 0.2);
      --timer-bg: rgba(255, 255, 255, 0.1);
    }

    @media (prefers-color-scheme: light) {
      :root {
        --bg-color: #f8f9fa;
        --card-bg: rgba(255, 255, 255, 0.7);
        --text-color: rgba(0, 0, 0, 0.8);
        --accent-color: #2563eb;
        --shadow-color: rgba(0, 0, 0, 0.08);
        --timer-bg: rgba(255, 255, 255, 0.8);
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: var(--bg-color);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      transition: background-color 0.3s ease;
    }

    /* Video container with acrylic effect */
    .video-container {
      width: 100%;
      max-width: 1200px;
      background: var(--card-bg);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 1px 8px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
    }

    /* Countdown timer with acrylic effect */
    .countdown-container {
      margin-top: 24px;
      position: relative;
      z-index: 10;
    }

    .countdown-card {
      background: var(--timer-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 5px rgba(0, 0, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    @media (prefers-color-scheme: light) {
      .countdown-card {
        box-shadow: 
          0 4px 20px rgba(0, 0, 0, 0.05),
          0 1px 5px rgba(0, 0, 0, 0.08),
          inset 0 1px 1px rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
    }

    .notice {
      color: var(--text-color);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    .timer-display {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 4px;
    }

    #countdown {
      color: var(--accent-color);
      font-weight: 600;
      font-size: 16px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.5px;
      position: relative;
      padding: 4px 8px;
      border-radius: 8px;
      background: rgba(58, 134, 255, 0.1);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    @media (prefers-color-scheme: light) {
      #countdown {
        background: rgba(37, 99, 235, 0.08);
      }
    }

    .countdown-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(58, 134, 255, 0.1);
      color: var(--accent-color);
      transition: all 0.3s ease;
    }

    @media (prefers-color-scheme: light) {
      .countdown-icon {
        background: rgba(37, 99, 235, 0.08);
      }
    }

    .countdown-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--accent-color);
      stroke-width: 2;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .video-container {
        border-radius: 12px;
      }
      
      .countdown-card {
        padding: 12px 18px;
      }
      
      .notice {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="video-container">
    <video controls autoplay>
      <source src="{{videoDataUrl}}" type='video/mp4'>
      您的浏览器不支持 HTML5 video 标签。
    </video>
  </div>
  
  <div class="countdown-container">
    <div class="countdown-card">
      <div class="countdown-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="notice">
        页面有效期剩余 
        <span class="timer-display">
          <span id="countdown">10:00</span>
        </span>
      </div>
    </div>
  </div>

  <script>
    let timeLeft = 600;
    
    function updateCountdown() {
      const minutes = Math.floor(timeLeft / 60);
      const seconds = timeLeft % 60;
      const display = document.getElementById('countdown');
      display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      
      // Add visual feedback when time is running low
      if (timeLeft <= 60) {
        display.style.color = '#ef4444';
        display.style.background = 'rgba(239, 68, 68, 0.1)';
      }
      
      if (timeLeft > 0) {
        timeLeft--;
        setTimeout(updateCountdown, 1000);
      } else {
        // Optional: Add some visual feedback when time is up
        const countdownCard = document.querySelector('.countdown-card');
        countdownCard.style.background = 'rgba(239, 68, 68, 0.1)';
        countdownCard.style.borderColor = 'rgba(239, 68, 68, 0.3)';
      }
    }
    
    // Start the countdown when the page loads
    document.addEventListener('DOMContentLoaded', () => {
      updateCountdown();
      
      // Add subtle animation to the countdown card
      const countdownCard = document.querySelector('.countdown-card');
      setTimeout(() => {
        countdownCard.style.transform = 'translateY(0)';
        countdownCard.style.opacity = '1';
      }, 300);
    });
  </script>
</body>
</html>
